<template>
	<view class="contaner">
		<!-- <scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="active==0?'text-green cur':''" @tap="tabSelect(0)">
					综合缴费
				</view>
				<view class="cu-item flex-sub" :class="active==1?'text-green cur':''" @tap="tabSelect(1)">
					电费
				</view>
				<view class="cu-item flex-sub" :class="active==2?'text-green cur':''" @tap="tabSelect(2)">
					水费
				</view>
			</view>
		</scroll-view> -->
		<view class="" v-if="active == 1">
			<scroll-view scroll-y style="padding-bottom: 200rpx;">
				<view class="block__title">应缴费用</view>
				<view class="cu-list menu" v-for="(item,index) in fees" :key="index" :data-item="item"
					@click="details(item)">
					<view class="cu-item ">
						<view class="content padding-tb-sm">
							<view>
								<view class="text-cut" style="width:150px">{{item.feeName}}({{item.payerObjName}})
								</view>
							</view>
							<view class="text-gray text-sm">
								<text class="margin-right-xs">{{item.endTime}}至{{item.deadlineTime}}</text>
							</view>
						</view>
						<view class="action">
							<text class="text-grey text-sm">应缴:￥{{item.feePrice}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bg-white  border flex justify-end" style="position: fixed;width: 100%;bottom: 0;">
				<view class="action text-orange margin-right line-height">
					合计：{{receivableAmount}}元
				</view>
				<view class="btn-group">
					<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="onPayFee()">缴费</button>
				</view>
			</view>
		</view>
		<view v-if="active == 0" class="fff">
			<view class="block__title">应缴费用</view>
			<view class="collapseitem">
				<block v-for="item in houseList" :key="item.taskId">
					<uni-collapse accordion="true">
						<view style="display: flex;">
							<view style="margin-top: 20rpx; margin-left: 20rpx;">
								<radio name="nameRadio" @click="checkr(item)" :checked='item.active'>
								</radio>
							</view>
							<uni-collapse-item :title='"房屋账号:" + item.idCard' open>
								<view class="box">
									<view class="texts">
										<view class="textStyle">房屋名称:{{item.idCard}}</view>
										<view class="textStyle">设备名称:电表</view>
										<view class="textStyle">设备状态:{{item.switchOn == 0 ? '开闸' : '合闸'}}</view>
										<view class="textStyle">设备编号:{{item.tel}}</view>
										<view class="textStyle">剩余电量:{{item.tel}}度</view>
										<view class="textStyle">剩余余额:{{item.feePrice}}元</view>
										<view class="textStyle">电价类型:{{item.electrovalence == 0 ?"单费率":"多费率"}}</view>
										<view v-if="item.electrovalence == 0">
											<view class="textStyle">电价:{{item.feePrice}}元</view>
										</view>
										<view v-if="item.electrovalence == 1">
											<view class="textStyle">尖电价:{{item.feePrice}}元</view>
											<view class="textStyle">峰电价:{{item.feePrice}}元</view>
											<view class="textStyle">平电价:{{item.feePrice}}元</view>
											<view class="textStyle">谷电价:{{item.feePrice}}元</view>
										</view>
										<view class="textStyle">综合服务费:{{item.idCard}}</view>
										<view>
											<uni-forms ref="form" :rules="rules">
												<uni-forms-item label="金额:" name="money">
													<uni-easyinput @input="inputBlur" v-model="item.amountMoney"
														placeholder="请输入金额" />
												</uni-forms-item>
											</uni-forms>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</view>
					</uni-collapse>
				</block>
			</view>


			<!-- 	<view class="choice" v-for="(item, index) in dianFree" :key="index" :class="{ checked: item.checked }"
				@click="changChecked(index)">
				<uni-collapse ref="collapse">
					<uni-collapse-item title="房屋编号:1-1-1001">
						<view class="text-gray text-sm">
							<text class="cuIcon-right margin-right-xs">缴费人</text> {{item.city}}
						</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-right margin-right-xs">缴费类型</text> {{item.feeName}}
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view> -->

		</view>
		<view class="" v-if="active == 2">
			水费
		</view>
		<view v-if="fees.length > 0" class="bg-white  border flex justify-end align-center"
			style="position: fixed;width: 100%;bottom: 0;">
			<view class="action margin-right line-height">
				合计：{{moneys}}元
			</view>
			<view class="btn-group">
				<!-- class="cu-btn bg-blue shadow-blur lgplus sharp" -->
				<button class="moneyBtn" type="primary" @click="onPayFee()">缴费</button>
			</view>
		</view>

	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	const constant = context.constant;
	// #ifdef H5
	import {
		payOweFee
	} from '../../api/fee/H5PayFee.js'
	// #endif
	// #ifdef APP-PLUS
	import {
		payOweFee
	} from '../../api/fee/AppPayFee.js'
	// #endif
	// #ifdef MP-WEIXIN
	import {
		payOweFee
	} from '../../api/fee/MiniPayFee.js'
	// #endif

	import {
		addMonth,
		formatDate
	} from '../../lib/java110/utils/DateUtil.js'

	import {
		getCurCommunity
	} from '../../api/community/communityApi.js'

	import {
		getRoomOweFees
	} from '../../api/fee/feeApi.js'

	import {
		getCurOwner
	} from '../../api/owner/ownerApi.js'

	import {
		getRoomFees
	} from '../../api/fee/feeApi.js'


	export default {
		data() {
			return {
				rules: {
					// 对name字段进行必填验证
					money: {
						// name 字段的校验规则
						rules: [
							// 对name字段进行长度验证
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						// 当前表单域的字段中文名，可不填写
						label: '姓名',
						validateTrigger: 'submit'
					}
				},
				money: '',
				// 多选数据源
				hobby1: '',
				hobby2: '',
				hobby3: '',
				hobbys: [{
					text: '房屋详情',
					value: 0
				}, ],
				// 账号数据
				houseList: [],
				isFalse: false,
				cityList: [{
						city: '上海',
						checked: false
					},
					{
						city: '北京',
						checked: false
					},
					{
						city: '西安',
						checked: false
					}
				],
				value: ['0'],
				accordionVal: '1',
				content: '',

				active: 0,
				scrollLeft: 0,
				amount: 0,
				receivableAmount: 0.00,
				communityId: '1001',
				ownerId: "1",
				communityName: '',
				appId: '',
				fees: [],
				roomId: '',
				storeId: '',
				dianFree: "",
				shuiFree: "",
				moneys: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _that = this;
			context.onLoad(options);
			this._loadOweFee();

			// 查询当前用户信息
			// getCurOwner().then(function(_owner){
			// 	_that.communityId = _owner.communityId;
			// 	_that.communityName = _owner.communityName;
			// 	_that.ownerId = _owner.ownerId;
			// 	_that._loadOweFee();
			// })
		},
		methods: {
			checkr(item) {
				console.log('前', item.active);
				this.fees.forEach((in1) => {
					if (in1.taskId == item.taskId) {
						in1.active = !item.active
					}
				})
				const selectList = this.houseList.filter(item => item.active)
				const numList = selectList.filter(item => item.amountMoney != '')
				console.log(selectList, 'dddd');
				console.log(numList, 'dddd');
				let sum = 0;
				numList.forEach(item => {
					sum = sum + Number(item.amountMoney)
				})
				this.moneys = sum
				console.log(sum);
			},
			inputBlur() {
				const selectList = this.houseList.filter(item => item.active)
				const numList = selectList.filter(item => item.amountMoney != '')
				console.log(selectList, 'dddd');
				console.log(numList, 'dddd');
				let sum = 0;
				numList.forEach(item => {
					sum = sum + Number(item.amountMoney)
				})
				this.moneys = sum
				console.log(sum);
			},
			ischange(e) {
				console.log(e);
			},
			// 多选
			changChecked(index) {
				this.cityList[index].checked = !this.cityList[index].checked
				console.log(this.cityList[index], "123")
			},
			// 折叠面板
			// change(e) {
			// 	console.log(e);
			// },
			tabSelect: function(_active) {
				this.active = _active;
				// this._loadCompaint(_active);
				this.noData = false;
			},

			details(ownData) {
				uni.navigateTo({
					url: './ownDetails?ownData=' + JSON.stringify(ownData)
				});
			},

			_loadOweFee: function() {
				let _that = this;
				let _objData = {
					ownerId: this.ownerId,
					page: 1,
					row: 50,
					communityId: this.communityId
				}
				getRoomOweFees(_objData)
					.then(function(_fees) {
						console.log(_fees, '_fees');


						_fees.forEach((in1) => {
							in1.active = false
						})

						_that.houseList = _fees
						console.log("请求数据", _fees[0].dianFree)
						_that.dianFree = _fees[0].dianFree
						_that.shuiFree = _fees[1].dianFree
						console.log("请求数据", _that.shuiFree)
						_that.fees = _fees;
						if (_fees && _fees.length > 0) {
							_that.storeId = _fees[0].incomeObjId;
						}
						return _fees;
					}, function(error) {
						uni.showToast({
							icon: 'none',
							title: '没有应缴费用'
						})
					})
					.then(function(_fees) {
						_fees.forEach(function(_item) {
							_that.receivableAmount += Number(_item.feePrice);

						})
						_that.receivableAmount = _that.receivableAmount.toFixed(2);
					})
			},
			onPayFee: function() {
				payOweFee(this);
			}
		}
	};
</script>
<style scoped lang="scss">
	.contaner {
		height: calc(100vh - 100rpx);
		overflow: auto;
	}

	.moneyBtn {
		height: 60rpx;
		width: 200rpx;
		border-radius: 45rpx;
		line-height: 60rpx;
		margin-right: 30rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.ppf_item {
		padding: 0rpx 0rpx 0rpx 0rpx;
	}

	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 34rpx;
		color: #282828;
		font-weight: 700;
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 40rpx;
	}

	.block__bottom {
		height: 180rpx;
	}

	.fee-last {
		margin-bottom: 200upx;
	}

	.cu-btn.lgplus {
		padding: 0 20px;
		font-size: 18px;
		height: 100upx;

	}

	.cu-btn.sharp {
		border-radius: 0upx;
	}

	.line-height {
		line-height: 100upx;
	}


	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	}


	.fff {
		padding: 30rpx;

		.choice {
			margin: 20rpx;
			cursor: pointer;

			&::before {
				display: block;
				margin-right: 2rpx;
				border: 1rpx solid #000;
				width: 30rpx;
				height: 30rpx;
				line-height: 10rpx;
				content: "";
				position: relative;
				top: 65rpx;
				left: 15rpx;
				transition: all 0.3s linear;
			}

			&.checked {
				color: white;
				background-color: none;
			}

			&.checked::before {
				border: rpx solid #fff;
				background-color: royalblue;
			}
		}
	}

	/deep/.uni-collapse-item__title-text {
		flex: 1;
		font-size: 32rpx;
		white-space: nowrap;
		color: inherit;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 30rpx;
	}

	.box {
		margin: 0 0 0 40rpx;
	}

	.texts {
		margin-top: 20rpx;

		.textStyle {
			height: 60rpx;
			font-size: 30rpx;
		}
	}
</style>
